<template>
    <div class="suspensionstyle">
        <!-- 标题 -->
        <h2>{{ datas.text }}</h2>

        <!-- 表单 -->
        <el-form :model="datas" label-position="top" label-width="80px" size="small">
            <!-- 跳转页面 -->
            <el-form-item label="跳转页面">
                <div class="imgText">
                    <!-- 选择类型 -->
                    <el-select v-model="datas.type" placeholder="请选择跳转类型" size="small" style="width: 60%">
                        <el-option v-for="item in optionsType" :key="item.name" :label="item.name" :value="item.type"/>
                    </el-select>

                    <!-- 输入链接 -->
                    <el-input v-model="datas.http.externalLink" placeholder="请输入链接，输入前确保可以访问" size="small" style="width: 100%"/>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  name: 'suspensionstyle',
  props: {
    datas: Object
  },
  data () {
    return {
      optionsType: [
        {
          type: '10',
          name: '内部链接'
        },
        {
          type: '11',
          name: '外部链接'
        }
      ], // 选择跳转类型
      options: [], //后端返回的列表提供下拉选择
      emptyText: ''
    }
  },
  created () {
  }
}
</script>
<style lang="scss" scoped>
.suspensionstyle {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 10px 20px;
  box-sizing: border-box;
  /* 标题 */
  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }

  .imgText {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;

    .fir-sele.el-select {
      width: 40%;
    }
  }
}
</style>
